<template>
  <div class="particulars-contain">
    <van-swipe>
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <div class="imgbox">
          <img :src="image.src" />
        </div>
      </van-swipe-item>
    </van-swipe>
    <div class="explain">
      <div class="price">
        <span class="new-price">￥{{ goodsData.sell_price }}</span
        ><span class="old-price">￥{{ goodsData.market_price }}</span>
      </div>
      <div class="title">{{ goodsData.title }}</div>
    </div>
    <div class="introduce">
      <van-divider>介绍</van-divider>
      <div v-html="goodsData.content" class="abstract"></div>
    </div>

    <van-action-bar>
      <van-action-bar-icon
        icon="cart-o"
        text="购物车"
        @click="$router.push('/shopcar')"
        :badge="shopStore.totalNum ? shopStore.totalNum : 0"
      />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="
          isShow = true;
          isPurchase = false;
        "
      />
      <van-action-bar-button
        type="danger"
        text="立即购买"
        @click="
          isShow = true;
          isPurchase = true;
        "
      />
    </van-action-bar>
    <!-- 商品sku -->
    <div class="popup">
      <van-popup
        v-model:show="isShow"
        closeable
        position="bottom"
        :style="{ height: '55%' }"
      >
        <div class="header">
          <img :src="images[0]?.src" alt="" />
          <div class="headerinfo">
            <span class="price"><b>￥</b>{{ goodsData.sell_price }}</span>
            <span>剩余 {{ goodsData.stock_quantity }} 件</span>
            <span>请选择</span>
          </div>
        </div>
        <van-divider></van-divider>
        <div class="quantity">
          <span>购买数量</span>
          <van-stepper v-model="number" />
        </div>
        <van-divider>其他信息</van-divider>
        <div class="info">
          <span>商品货号：{{ goodsData.goods_no }}</span>
          <span>库存情况：{{ goodsData.stock_quantity }}</span>
          <span>上架时间：{{ goodsData.add_time }}</span>
        </div>
        <div class="btn">
          <van-action-bar v-if="isPurchase">
            <van-action-bar-button
              @click="onBuyClicked"
              type="danger"
              text="立即购买"
            />
          </van-action-bar>
          <van-action-bar v-else>
            <van-action-bar-button
              @click="onAddCartClicked"
              type="warning"
              text="加入购物车"
            />
            <van-action-bar-button
              @click="onBuyClicked"
              type="danger"
              text="立即购买"
            />
          </van-action-bar>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script setup>
import { Toast } from "vant";
import { reqGetGoodsImg, reqGetParticulars, addHistory } from "@/api";
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import useShopStore from "@/store/shop.js";
const shopStore = useShopStore();
const $route = useRoute();
const $router = useRouter();
const id = $route.params.id;
const images = ref([]);
const goodsData = ref({});
const isShow = ref(false);
const number = ref(1);
const isPurchase = ref(0);
const totalNum = ref(0);

const storage = () => {
  let goodsdetail = {
    id,
    isSelected: true,
    number: number.value,
    price: goodsData.value.sell_price,
  };
  shopStore.addShopCarList(goodsdetail);
  isShow.value = false;
};

const onAddCartClicked = () => {
  if (!shopStore.token) {
    $router.push("/login");
    return;
  }
  storage();
  Toast("加入购物车成功");
};

const onBuyClicked = () => {
  if (!shopStore.token) {
    $router.push("/login");
    return;
  }
  storage();
  $router.push(`/shopcar`);
};

const getGoodsImg = async () => {
  let { message } = await reqGetGoodsImg(id);
  images.value = message;
};

const getParticulars = async () => {
  let { message } = await reqGetParticulars(id);
  goodsData.value = message;
  let reg = /width="\d+(px)?"/gi;
  goodsData.value.content = goodsData.value.content.replace(reg, "");
};

onMounted(async () => {
  getGoodsImg();
  getParticulars();
  if (shopStore.token) {
    await addHistory($route.params.id);
  }
});
</script>

<style lang="scss" scoped>
.particulars-contain {
  padding: 10px;

  .van-swipe {
    margin-bottom: 10px;

    .imgbox {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 256px;
      background: #fff;
      border-radius: 7px;

      img {
        width: 245px;
        max-height: 240px;
        object-fit: fill;
      }
    }
  }

  .explain {
    height: 60px;
    padding: 10px 0;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 7px;

    .price {
      .new-price {
        margin-right: 30px;
        font-size: 20px;
        color: orange;
      }

      .old-price {
        font-size: 14px;
        text-decoration: line-through;
      }
    }

    .title {
      overflow: hidden;
      font-size: 16px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .introduce {
    padding: 10px;
    background: #fff;
    border-radius: 6px;

    ::v-deep .abstract {
      font-size: 14px;
      line-height: 20px;

      img {
        width: 100%;
        max-height: 100%;
      }
    }
  }

  .van-action-bar {
    width: 100%;
  }

  .popup {
    .van-popup {
      padding: 10px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }

    .header {
      display: flex;

      img {
        width: 96px;
        height: 96px;
      }

      .headerinfo {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 30px;
        padding-bottom: 10px;
        font-size: 12px;
        color: #969799;

        .price {
          b {
            font-size: 16px;
          }

          font-size: 22px;
          color: orange;
        }
      }
    }

    .quantity {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
    }

    .info {
      display: flex;
      flex-direction: column;

      span {
        margin: 5px 0;
        font-size: 14px;
      }
    }
  }
}
</style>
